import { useState } from "react"


// useState

const A = props => {
  // 在类组件中，状态变化，会重新render
  // 在函数式组件，状态变化，整体函数都会重新执行

  // 为什么useSate时，建议使用const?
  // 答：不可变数据，之所以建议使用const，原国百如果使用cosnt,定义的状态是不能直接修改的。

  // 当使用useState时，为什么是数组解构，不是对象的解构？
  // 答：let {userName,userAge} = {userName:"wc",userAge:18}
  //   如果使用对象，解构出来的名字都是定死的。
  //    let [a,b] = ["wc",18]
  //   如果使用数组解构，解构出来的名字随便写

  // setNum是修改状态的一个专属方法，写法有几种
  // 写法一：setNum(num+1)
  // 写法二：setNum(_=>_+1)  _表示旧num
  // 不管是哪种写法，都没有类似于setState中的callback

  // 前面说了，当状态发生了变化，整体函数会重新执行
  // 按理说，useState(1)会重新执行，是相当于重新定义了一个状态，是1
  // useState(1) 定义的状态是保存在最底层，只有第一次才会把这个状态定义出来
  // 后面重新运行函数，不会再定义状态，仅仅是最底层中得到状态，进而去操作状态

  console.log("start...");
  const [num, setNum] = useState(1)
  // console.log(num++); // 直接修改num就会报错
  console.log("num:", num);
  console.log("end...");
  return (
    <div>
      <h2>函数式组件</h2>
      <h3>{num}</h3>
      <button onClick={() => setNum(num + 1)}>+1</button>
    </div>
  )
}

export default A;